<template>
  <div class="flex aligncenter">
    <div
      v-for="(item, index) in days"
      :key="index"
      class="dataname f-14 commhover"
      :class="{ active: daynum == item.value }"
      @click="handleClick(item)"
    >
      {{ item.name }}
    </div>
    <el-date-picker
      class="mr_10"
      v-model="time"
      type="datetimerange"
      value-format="yyyy-MM-dd HH:mm:ss"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="changeTime"
    >
    </el-date-picker>
    <el-date-picker
      v-if="type == 1"
      v-model="time1"
      value-format="yyyy-MM-dd HH:mm:ss"
      type="datetimerange"
      range-separator="至"
      start-placeholder="对比开始日期"
      end-placeholder="对比结束日期"
      @change="changeTime1"
    >
    </el-date-picker>
  </div>
</template>

<script>
import { time_date } from "@/utils/validate";
export default {
  data() {
    return {
      daynum: 1,
      days: [
        { name: "今日", value: 1 },
        { name: "本周", value: 2 },
        { name: "本月", value: 3 },
        { name: "全年", value: 4 },
      ],
      time: "",
      time1: "",
    };
  },
  props: {
    type: {
      default: 1,
    },
  },
  methods: {
    handleClick(item) {
      this.daynum = item.value;
      this.dayname = item.name;
      this.time = "";
      this.time1 = "";
      let params = {};
      if (this.daynum == 1) {
        params.now_start = this.parseTime(time_date(1).start);
        params.now_end = this.parseTime(time_date(1).end);
        params.old_start = this.parseTime(time_date(-1).start);
        params.old_end = this.parseTime(time_date(-1).end);
      }
      // 本周
      if (this.daynum == 2) {
        params.now_start = this.parseTime(time_date(7).start);
        params.now_end = this.parseTime(time_date(7).end);
        params.old_start = this.parseTime(time_date(-7).start);
        params.old_end = this.parseTime(time_date(-7).end);
      }
      // 本月
      if (this.daynum == 3) {
        params.now_start = this.parseTime(time_date(30).start);
        params.now_end = this.parseTime(time_date(30).end);
        params.old_start = this.parseTime(time_date(-30).start);
        params.old_end = this.parseTime(time_date(-30).end);
      }
      // 全月
      if (this.daynum == 4) {
        params.now_start = this.parseTime(time_date(365).start);
        params.now_end = this.parseTime(time_date(365).end);
        params.old_start = this.parseTime(time_date(-365).start);
        params.old_end = this.parseTime(time_date(-365).end);
      }

      this.$emit("changeTime", { params, item });
    },

    changeTime() {
      if (this.type == 1) {
        if (this.time && this.time1) {
          this.daynum = "";
          let params = {};
          params.now_start = this.time[0];
          params.now_end = this.time[1];
          params.old_start = this.time1[0];
          params.old_end = this.time1[1];
          let item = { name: "所选时间" };
          this.$emit("changeTime", { params, item });
        }
      } else if (this.type == 2) {
        this.daynum = "";
        let params = {};
        params.now_start = this.time[0];
        params.now_end = this.time[1];
        let item = { name: "所选时间" };
        this.$emit("changeTime", { params, item });
      }
    },

    changeTime1() {
      console.log(this.time, this.time1);
      if (this.time && this.time1) {
        this.daynum = "";
        let params = {};
        params.now_start = this.time[0];
        params.now_end = this.time[1];
        params.old_start = this.time1[0];
        params.old_end = this.time1[1];
        let item = { name: "所选时间", id: 0 };
        this.$emit("changeTime", { params, item });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dataname {
  margin-right: 24px;
  color: #8e8e8e;
  position: relative;
  &.active {
    color: #000;
  }
  &.active::after {
    position: absolute;
    content: "";
    width: 28px;
    height: 2px;
    background-color: #1670f1;
    bottom: -6px;
    left: 0;
  }
}
</style>